<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .red{color:red}
    </style>
</head>
<body>
    <div class="box">
        <h3 abc="hello">三级标题1</h3>
        <h3>三级标题2</h3>
        <h3 class="red">三级标题3</h3>
        <p abc="world">段落1</p>
        <p>段落2</p>
        <h3 abc="hello">三级标题4</h3>
        <h3 abc="hello">三级标题5</h3>
        <p class="red">段落3</p>
        <h3 abc="world">三级标题6</h3>
        <p>段落4</p>
        <h3 class="red">三级标题7</h3>
        <h3>三级标题8</h3>
        <p class="red" abc="hello">段落5</p>
        <p class="red" qwe="hello">段落6</p>
        <p>段落7</p>
    </div>
</body>
<script>

    // var h3s = document.querySelectorAll("h3");
    // for(var i=0;i<h3s.length;i++){
    //     h3s[i].onclick = function(){
    //         console.log(this);
    //     }
    // }
        
    var box = document.querySelector(".box")
    box.onclick = function(eve){
        var e = eve || window.event;
        var target = e.target || e.srcElement;

        // console.log(target.tagName);
        // console.log(target.nodeName);
        // if(target.tagName === "H3"){
        // if(target.tagName === "P"){
        // if(target.className === "red"){
        if(target.getAttribute("abc") === "hello"){
            console.log(target);
        }
    }

</script>
</html>